<template>
	<view class="content">
		<view class="bg-view"></view>
		<!-- 基本信息 -->
		<view class="info-cont">
			<view class="inner">
				<view class="head">
					<view class="left">
						<image class="img" src="../../../static/images/icon_file.png" mode="aspectFill"></image>
						<text class="text">{{item.code}}</text>
					</view>
					<view class="state-box">
						<view class="state param" v-if="item.checkStatus == '0'"><image class="img" src="../../../static/images/icon_shz.png" mode="aspectFill"></image>审核中</view>
						<view class="state info" v-if="item.checkStatus == '1'"><image class="img" src="../../../static/images/icon_tg.png" mode="aspectFill"></image>已审核</view>
						<view class="state success" v-if="item.checkStatus == '2'"><image class="img" src="../../../static/images/icon_zf.png" mode="aspectFill"></image>已拒绝</view>
					</view>
				</view>
				<!-- 回款信息 -->
				<view class="msg-box">
					<view class="left auto">
						<view class="item">
							<text class="text">回款金额:</text>
							<text class="text">￥{{item.money}}</text>
						</view>
						<view class="item">
							<text class="text">回款方式:</text>
							<text class="text">
								{{utils.getDictLabelName("receivablesType",item.returnType)}}
							</text>
						</view>
						<view class="item">
							<text class="text">回款时间:</text>
							<text class="text">{{item.returnTime}}</text>
						</view>
						 
					</view>
				</view>
				<!-- 客户 -->
				<view class="cust-box" @click="showCustDetail(customer)">
					<view class="left">
						<image class="img" src="../../../static/images/icon_head_blue.png" mode="aspectFill"></image>
						<text class="text">{{customer.customerName}}</text>
					</view>
					<image class="arrow" src="../../../static/images/right_arrow.png" mode="aspectFill"></image>
				</view>
				<!-- 审核中操作按钮 -->
				<view class="hand-box" v-if="item.checkStatus == 0&&currentUser.userId==item.auditUserId">
					<view class="btn adopt" @click="toExam(1)">
						<image class="img" src="../../../static/images/icon_tg_white.png" mode="aspectFill"></image>
						通过
					</view>
					<view class="btn refuse" @click="toExam(2)">
						<image class="img" src="../../../static/images/icon_jj.png" mode="aspectFill"></image>
						拒绝
					</view>
				</view>
			</view>
		</view>
		<!-- 基本信息 -->
		<essent-info ref="essentInfo" ></essent-info>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	import essentInfo from './essentInfo.vue'
 
	export default {
		components:{
			essentInfo, // 基本信息
		},
		data() {
			return {
				currentUser:{},
				receivablesId:undefined,
				item:{},
				customer:{},
				contractId:undefined,
			}
		},
		onLoad(options) {
			this.receivablesId = options.receivablesId
			// 修改顶部导航背景色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#39b54a',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.currentUser=JSON.parse(uni.getStorageSync('user'));
		},
		onShow() {
			this.getReceivablesDetails()
		},
		methods: {
			getReceivablesDetails(){
				var data = {receivablesId:this.receivablesId};
				var that=this;
				api.getReceivablesDetails(data).then(
					res => {
						if(res.code==200){
							 this.item=res.receivables;
							 this.customer=res.customer;
							
							 that.$refs.essentInfo.getDetails(this.item,res.contract);
							  
							 
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			// 查看客户详情
			showCustDetail(item){
				uni.navigateTo({
					url: '../../customer/customDetail?customerId='+item.customerId
				})
			},
			// 审核
			toExam(type){
				uni.navigateTo({
					url: './examine?receivablesId=' + this.receivablesId+"&checkStatus="+type
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding: 20upx 0;
		position: relative;
		.bg-view{
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 160upx;
			background: #39b54a;
		}
		.info-cont{
			padding: 0 50upx;
			margin-bottom: 30upx;
			.inner{
				padding: 30upx;
				background: #fff;
				border-radius: 10upx;
				.head{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						.img{
							width: 50upx;
							height: 50upx;
							margin-right: 20upx;
						}
						.text{
							font-size: 32upx;
							color: #000;
						}
					}
					// 审核状态
					.state-box{
						.state{
							width: 150upx;
							padding: 10upx 0;
							font-size: 24upx;
							text-align: center;
							display: flex;
							align-items: center;
							justify-content: center;
							.img{
								width: 20upx;
								height: 20upx;
								margin-right: 10upx;
							}
							&.param{
								background: #EBF3FE;
								color: #458BEB;
							}
							&.info{
								background: #F8F8F8;
								color: #BFBFBF;
							}
							&.success{
								background: #E7F7ED;
								color: #2FAC5F;
							}
						}
					}
				}
				.msg-box{
					display: flex;
					justify-content: space-between;
					margin-top: 10upx;
					.left{
						&.auto{
							width: 100%;
						}
						.item{
							display: flex;
							align-items: center;
							margin-top: 20upx;
							.img{
								width: 30upx;
								height: 30upx;
								margin-right: 10upx;
							}
							.text{
								font-size: 30upx;
								color: #333;
							}
						}
					}
					.right{
						width: 80upx;
						height: 80upx;
						align-self: flex-end;
					}
				}
				// 客户
				.cust-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 1px solid #f7f7f7;
					margin-top: 20upx;
					padding: 20upx 0;
					.left{
						display: flex;
						align-items: center;
						.img{
							width: 60upx;
							height: 60upx;
							margin-right: 20upx;
						}
						.text{
							font-size: 30upx;
							color: #3B80F7;
						}
					}
					.arrow{
						width: 20upx;
						height: 20upx;
					}
				}
				// 审核中操作按钮
				.hand-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 1px solid #f7f7f7;
					padding: 20upx 0;
					.btn{
						width: 47%;
						height: 80upx;
						line-height: 80upx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28upx;
						color: #fff;
						border-radius: 8upx;
						&.adopt{
							background: #2EB76F;
						}
						&.refuse{
							background: #F75759;
						}
						.img{
							width: 30upx;
							height: 30upx;
							margin-right: 20upx;
						}
					}
				}
			}
		}
	}
</style>
